<template>
  <section>
    <div class="wrapper">
      <h2>{{ category }}</h2>
      <van-empty image="search" description="暂无数据" v-show="emptyShow" />
<!--      <van-empty image="error" description="描述文字" v-show="emptyShow" />-->
      <van-list
        v-model="loading"
        v-show="!emptyShow"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="onLoad"
      >
        <ul>
          <li
            v-for="(item, index) in activityList"
            :key="index"
            @click="$troute.query('maDetail', item.id)"
          >
            <a><img :src="'/api/file/' + item.activityPicture" alt="" /></a>
            <div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.createTime }}<span class="audit" v-if="audit" @click.stop="itemData = item,isAudit = true">审核</span></p>
            </div>
          </li>
        </ul>
      </van-list>
      <van-dialog closeOnClickOverlay v-model="isAudit" title="审核" confirm-button-text="通过" cancel-button-text="驳回" show-cancel-button @confirm="cAudit(2)" @cancel="cAudit(3)">
        <p style="font-size:14px;text-align:center;padding: 10px 0">是否审核通过</p>
      </van-dialog>
    </div>
  </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import {List, Notify} from "vant";

Vue.use(List);
export default {
  data() {
    return {
      activityType:{},
      category: "", //活动类别
      audit:false,
      activityList: [], //活动列表
      count: 0,
      loading: false,
      finished: false,
      isAudit:false,
      itemData:'',
      emptyShow:false,
      params: {
        page: 1,
        rows: 10,
      },
    };
  },
  mounted() {
    let str = this.$route.query.tdata;
    this.audit=(str=='1')?true:false
  },
  methods: {
    onLoad() {
      let str = this.$route.query.tdata;
      if(this.audit){
        this.category='活动审核'
        api.AAGetAuditList(this.params).then(res => {
          if(res.count>0){
            this.pData(res)
          }else{
            this.loading = true;
            this.emptyShow=true
          }
        });
      }else{
        this.activityType = JSON.parse(str)
        this.category = JSON.parse(str).activityTypename;
        // 异步更新数据
        api.activityOldList(this.params,{activityTypeId:this.activityType.id}).then((res) => {
          if(res.count>0){
           this.pData(res)
          }else{
            // console.log(1)
            this.loading = true;
            this.emptyShow=true

          }
        });
      }

    },
    pData(res){
      this.count = res.count;

      this.activityList.push(...res.data);
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (this.activityList.length == this.count) {
        this.finished = true;
      } else {
        this.params.page++;
      }
    },
    // 审核
    cAudit(status) {
      let data = {
        id: this.itemData.id,
        status: status
      };
      api.ALAudit(data).then(res => {
        if (res.code == "success") {
          Notify({ type: 'success', message: '审批成功' });
        } else {
          Notify({ type: 'danger', message: res.desc });
        }
        this.isAudit = false;
        this.activityList=[]
        this.onLoad();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
}
.wrapper {
  padding: 25px 20px;
  h2 {
    position: relative;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 25px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  ul li {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fefefe;
    overflow: hidden;
    a {
      float: left;
      width: 100px;
      height: 75px;
      border-radius: 5px;
      overflow: hidden;
      background-color: #eee;
    }
    div {
      margin-left: 115px;
      h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 3em;
        line-height: 1.5em;
        font-size: 16px;
      }
      p {
        margin-top: 8px;
        color: #666;
        display:flex;
        align-items:center;
        justify-content: space-between;
      }
    }

  }
}
.audit{
       display:block;
       width: 60px;
       height: 26px;

       text-align: center;
       line-height: 26px;
       background: #9f1016;
       color: #fff;
       border-radius: 13px;
}
</style>